<template>
  <div class="carousel-manage">
    <div class="box-top">
      <el-form>
        <el-form-item label="轮播图类型">
          <el-select clearable v-model="type" placeholder="请选择轮播图类型">
            <el-option v-for="(item, i) in typeList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select clearable v-model="status" placeholder="请选状态">
            <el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="currentPage=1;init()">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-mid">
      <el-button type="primary" @click="handleAdd(true)">新增</el-button>
    </div>
    <div class="box-table">
      <el-table v-loading="loading" border :data="tableData" tooltip-effect="dark">
        <el-table-column prop="create_time" align="center" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="图片预览" width="200px" show-overflow-tooltip>
          <template slot-scope="scope">
            <img class="my-img" :src="scope.row.pic" @click="clickImg(scope.row.pic)" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="轮播图类型" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.type === '1' ? '图片' : '网址'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch @change="changeStatus($event,scope.row.banner_id)" v-model="scope.row.check">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="payload" align="center" label="额外参数" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleAdd(false, scope.row)" type="text">修改</el-button>
            <el-button @click="handleRemove(scope.row.banner_id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="550px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="轮播图类型" prop="type">
          <el-select clearable v-model="ruleForm.type" placeholder="请选择轮播图类型">
            <el-option v-for="(item, i) in typeList" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主图url全路径" prop="pic">
          <el-upload action="/v1/common/uploadImage" :on-success="uploadSuccess" :multiple="false" :headers="headers" :show-file-list="false">
            <div class="upload-apk">
              <el-button type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">注意：请上传jpg/png文件，且不超过2M</div>
            </div>
          </el-upload>
          <el-input placeholder="请输入主图url全路径" clearable v-model="ruleForm.pic"></el-input>
        </el-form-item>
        <el-form-item label="额外参数">
          <el-input placeholder="请输入额外参数" clearable v-model="ruleForm.payload"></el-input>
        </el-form-item>
        <el-form-item label="排序序号">
          <el-input placeholder="请输入排序序号" clearable v-model="ruleForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="1">正常</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="图片预览" :visible.sync="showImg">
      <img class="show-img" :src="imgPath" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'CarouselList',
  data () {
    return {
      imgPath: '',
      showImg: false,
      type: '',
      status: '',
      headers: {
        'access-token': localStorage.getItem('token') || ''
      },
      loading: false,
      id: null,
      typeList: [
        { name: '图片', value: '1' },
        { name: '网址', value: '2' }
      ],
      statusList: [
        { name: '正常', value: '1' },
        { name: '禁用', value: '2' }
      ],
      title: '新增轮播图',
      total: 0,
      pageSize: 20,
      currentPage: 1,
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        type: '',
        pic: '',
        payload: '',
        sort: '',
        status: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择轮播图类型', trigger: 'change' }
        ],
        pic: [
          { required: true, message: '请输入主图url全路径', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    ...mapActions({
      getInitData: 'noticeManage/carouselList',
      update: 'noticeManage/updateCarousel',
      add: 'noticeManage/addCarousel',
      remove: 'noticeManage/deleteCarousel',
      updateCarouselStatus: 'noticeManage/updateCarouselStatus'
    }),
    clickImg (url) {
      this.imgPath = url
      this.showImg = true
    },
    changeStatus (status, id) {
      const params = {
        banner_id: id,
        status: status ? '1' : '2'
      }
      this.updateCarouselStatus(params).then(res => {
        this.$message.success('修改状态成功')
      })
    },
    uploadSuccess (res) {
      if (res.code === 0) {
        this.$message.success('图片上传成功')
        this.ruleForm.pic = res.data.url
      }
    },
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.updateData()
        } else {
          return false
        }
      })
    },
    updateData () {
      let str = this.title === '新增轮播图' ? 'add' : 'update'
      if (this.title === '新增轮播图') {
        str = 'add'
      } else {
        str = 'update'
        this.ruleForm.banner_id = this.id
      }
      this[str](this.ruleForm).then(res => {
        if (res) {
          this.init()
          this.$message.success('保存成功')
          this.dialogVisible = false
        }
      })
    },
    init () {
      const params = {
        size: this.pageSize,
        page: this.currentPage,
        type: this.type,
        status: this.status
      }
      this.loading = true
      this.getInitData(params).then(res => {
        const { list, total } = res
        list.forEach(p => {
          p.check = p.type === '1'
        })
        this.tableData = list
        this.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleRemove (id) {
      const params = {
        banner_id: id
      }
      this.remove(params).then(res => {
        if (res) {
          this.init()
          this.$message.success('删除成功')
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleReset () {
      this.type = ''
      this.status = ''
    },
    handleAdd (isNew, item) {
      this.dialogVisible = true
      if (isNew) {
        this.title = '新增轮播图'
        let data = this.$refs['ruleForm']
        if (data) {
          data.resetFields()
        }
      } else {
        this.title = '修改轮播图'
        this.id = item.banner_id
        this.ruleForm = {
          type: item.type,
          pic: item.pic,
          payload: item.payload,
          status: item.status,
          sort: item.sort
        }
      }
    }
  }
}
</script>
<style lang="less">
  .carousel-manage {
    .my-img {
      width: 100%;
      border: none;
      cursor: pointer;
    }
    .show-img {
      width: 100%;
      border: none;
    }
    .upload-apk {
      white-space: nowrap;
      padding-bottom: 10px;
      .el-upload__tip {
        margin: 0;
        padding-left: 10px;
        display: inline;
      }
    }
  }
</style>
